<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>SSR Demo 1</title>
</head>
<body>
  <h1>SSR Demo 1: HTML 文件由服务器直接返回</h1>
  <ul>
    <li>列表 1</li>
    <li>列表 2</li>
    <li>列表 3</li>
    <li>列表 4</li>
    <li>列表 5</li>
    <li>列表 6</li>
    <li>列表 7</li>
    <li>列表 8</li>
    <li>列表 9</li>
    <li>列表 10</li>
  </ul>
  <h2>Counter 计数器</h2>
  <div>
    <button id="minus">-</button>
    <span id="number">0</span>
    <button id="plus">+</button>
  </div>
  <div>
    <h2>测试路由</h2>
    <button id="push">pushstate</button>
    <button id="replace">replaceState</button>
  </div>
  
</body>
<script>
  const minus = document.querySelector('#minus')
  const plus = document.querySelector('#plus')
  const number = document.querySelector('#number')

  minus.addEventListener('click', function() {
    number.textContent = Number(number.textContent) -1
  })
  plus.addEventListener('click', function() {
    number.textContent = Number(number.textContent) + 1
  })

  const push = document.querySelector('#push')
  const replace = document.querySelector('#replace')
  const stateObj = { foo: "bar" }
  push.addEventListener('click', function() {
    history.pushState(stateObj, "", "/?query=test")
  })
  replace.addEventListener('click', function() {
    history.replaceState(stateObj, "", "/")
  })
</script>
</html>